import Taro, { Component } from "@tarojs/taro";
import { View, ScrollView, Text } from "@tarojs/components";
import Available from "./available";
import Freeze from "./freeze";
import "./index.less";

class Records extends Component {
  state = {
    page: 1,
    type:9
  };

  componentWillMount() {
    this.getListForDataStatus();
  }

  handleOnScrollToUpper() {
    this.setState(
      {
        page: 1
      },
      () => {
        this.getListForDataStatus();
      }
    );
  }

  handleOnScrollToLower() {
    const { recordsList } = this.props;
    if (recordsList.length > 0 && recordsList.length % 10 === 0) {
      const { page } = this.state;
      this.setState(
        {
          page: page + 1
        },
        () => {
          this.getListForDataStatus();
        }
      );
    }
  }

  async getListForDataStatus() {
    const { page,type } = this.state;
    if (this.props.status === 0) {
      await this.props.getRecords({ page,type });
    } else {
      await this.props.getFreezeAccountLog({ page });
    }
  }

  changeRecordsStatus(index) {
    this.setState({
      type: this.props.statusList[index].type
    }, () => {
      this.props.changeStatus && this.props.changeStatus(index)
    })

  }

  render() {
    const { recordsList, status } = this.props;
    const clientHeight = document.getElementById("app").clientHeight - 50;
    return (
      <View className="detail-body">
        {/* {!status && [
          <View className="detail-status-list">
            {this.props.statusList.map((item, index) => (
              <View
                onClick={this.changeRecordsStatus.bind(this,index)}
                className={{
                  "status-title": true,
                  "status-active": item.active
                }}
              >
                {item.title}
              </View>
            ))}
          </View>,
          <View className="detail-divider-line" />
        ]} */}

        <View className="detail-account-list">
          <ScrollView
            scrollY
            scrollWithAnimation
            style={{ height:  clientHeight+"px" }}
            scrollTop="0"
            lowerThreshold="10"
            onScrollToUpper={this.handleOnScrollToUpper.bind(this)}
            onScrollToLower={this.handleOnScrollToLower.bind(this)}
          >
            {recordsList.length > 0 ? (
              [
                recordsList.map((item, index) => {
                  return !status ? (
                    <Available item={item} />
                  ) : (
                    <Freeze item={item} />
                  );
                }),
                recordsList.length % 10 > 0 && (
                  <View style="display:flex;flex-direction:row;justify-content:center">
                    <Text style="font-size:12px;color:#cccccc;">
                      -没有更多了-
                    </Text>
                  </View>
                )
              ]
            ) : (
              <View className="has-no-data">
                <Text style="font-size:12px;color:#cccccc;">- 暂无数据 -</Text>
              </View>
            )}
          </ScrollView>
        </View>
      </View>
    );
  }
}
export default Records;
